
import { Hello, Button, SpaceWraper, Table, DemoCard, Input, Select, Modal, Drawer } from "@teach_wmg_21";

import BuzSelect from './BuzSelect'

export default class ComTest extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            value: '123',
            options: [],
            show: false,
            show_01: false,
            show_drawer: false,
            modalRoot: null,

            query: {
                orderType: '',
                valid: ''
            },

        }
    }


    componentDidMount() {
        this.setState({
            modalRoot: document.getElementById("aaa")
        })
    }


    onInputChange = (e) => {
        this.setState({
            value: e.target.value
        })
    }


    handleBuzSelectChange = (selectedOption, lastProps) => {
        this.setState({
            query: {
                ...this.state.query,
                [lastProps.name]: selectedOption == null ? '' : selectedOption.value
            }
        },
            () => {
                console.log(`Option selected:`, selectedOption);
                console.log(`lastProps:`, lastProps);
            }
        );
    };

    render() {
        return (
            <div id="aaa" style={{ height: '600px', width: '100%' }} >

                <SpaceWraper  >

                    <div className="label_title">有效性滴</div>
                    <BuzSelect enumType="valid" my_value={this.state.query.valid} name={'valid'} onChange={this.handleBuzSelectChange} />
                    <div className="label_title">订单状态</div>
                    <BuzSelect enumType="orderType" my_value={this.state.query.orderType} name={'orderType'} onChange={this.handleBuzSelectChange} />
                    <div className="label_title">有效性滴</div>
                    <BuzSelect enumType="valid" my_value={this.state.query.valid} name={'valid'} onChange={this.handleBuzSelectChange} />
                    <div className="label_title">订单状态</div>
                    <BuzSelect enumType="orderType" my_value={this.state.query.orderType} name={'orderType'} onChange={this.handleBuzSelectChange} />

                </SpaceWraper>

                <div style={{ height: '10px' }}></div>

                <SpaceWraper  >


                    <Input width={180} />

                    {/* <BuzSelect isMulti isClearable enumType="valid" my_value={this.state.query.valid} name={'valid'} onChange={this.handleBuzSelectChange} />
                    <BuzSelect isMulti isClearable placeholder="==订单状态==" enumType="orderType" my_value={this.state.query.orderType} name={'orderType'} onChange={this.handleBuzSelectChange} /> */}
                    <Button onClick={() => this.setState({ show: true })}>搜索</Button>

                    <Button onClick={() => this.setState({ show: true })}>整体弹框</Button>
                    <Button onClick={() => this.setState({ show_01: true })}>局部弹框</Button>
                    <Button onClick={() => this.setState({ show_drawer: true })}>侧滑</Button>

                    {
                        this.state.show && <Modal show={this.state.show} width={600} height={400} onCancel={() => this.setState({ show: false })} />
                    }

                    {
                        this.state.show_01 && <Modal show={this.state.show_01} modalRoot={this.state.modalRoot} width={600} height={400} onCancel={() => this.setState({ show_01: false })} />
                    }

                    {
                        this.state.show_drawer && <Drawer show={this.state.show_drawer} width={600} onCancel={() => this.setState({ show_drawer: false })} >
                            <div className="my_footer">
                                呵
                            </div>
                        </Drawer>
                    }


                </SpaceWraper>
            </div>

        );
    }
}